<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item :label='$t("用户账户")'>
          <el-input v-model="formInline.userName" :placeholder='$t("请输入用户账户")' clearable></el-input>
        </el-form-item>
        <el-form-item :label='$t("会员名称")'>
          <el-input v-model="formInline.memberName" :placeholder='$t("请输入会员名称")' clearable></el-input>
        </el-form-item>
        <el-form-item :label='$t("购买类型")'>
          <el-select v-model="formInline.purchaseType" :placeholder='$t("全部")' clearable>
            <el-option :label='$t("购买")' value="1"></el-option>
            <el-option :label='$t("续费")' value="2"></el-option>
            <el-option :label='$t("赠送")' value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label='$t("购买时间")'>
          <!-- <span class="demonstration daytime">{{$t("默认")}}</span> -->
          <el-date-picker v-model="formInline.buyTime" type="date" :placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd" clearable>
          </el-date-picker>
        </el-form-item>

        <el-form-item :label='$t("支付方式")'>
          <el-select v-model="formInline.payType" :placeholder='$t("全部")' clearable>
            <el-option v-for="(item, index) in payType" :key="item[1]" :label="item[0]" :value="item[1]" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleFilter"
            v-permission="['GET /admin/p/member_pay_user_log_index']">{{ $t('Search') }}</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row>
      <el-table-column align="center" type="index" :label='$t("序号")' width="50"></el-table-column>
      <el-table-column align="center" :label='$t("用户ID")' prop="userId" />
      <el-table-column align="center" :label='$t("用户账号")' prop="userName" />
      <el-table-column align="center" :label='$t("会员名称")' prop="memberName" />
      <el-table-column align="center" :label='$t("购买类型")' prop="purchaseType">
        <template slot-scope="scope">
          <span>{{ $t(scope.row.purchaseType == 1 ? '购买' : scope.row.purchaseType == 2 ? '续费' : scope.row.purchaseType
              == 3 ? '赠送' : scope.row.purchaseType)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label='$t("付款方式")' prop="payType">
        <template slot-scope="scope">
          <span>{{ $t(scope.row.payType == 1 ? '余额' : scope.row.payType == 2 ? '信用卡' : scope.row.payType == 3 ? 'paypal'
              : scope.row.payType == 4 ? '积分支付' : '')
          }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label='$t("金额")' prop="price">
        <template slot-scope="scope">
          <span>{{ formatePrice(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label='$t("购买时间")' prop="buyTime" />
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="formInline.page" :limit.sync="formInline.limit"
      @pagination="getList" />

    <!-- <el-tooltip placement="top" :content="$t('Back_to_top')">
      <back-to-top :visibility-height="100" />
    </el-tooltip> -->
  </div>
</template>
<script>
import { payMemberUserLogList } from '@/api/user'
import { listPayType } from '../../api/config'
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },
  name: 'PaidMemberRecord',
  data() {
    return {
      value1: '',
      formInline: {

        page: 1,
        limit: 20,
        sort: 'add_time',
        order: 'desc'
      },
      payType: [],
      list: [],
      total: 0,
      listLoading: false,
    }
  },
  created() {
    this.getList()
    this.init()
  },
  methods: {
    init: function () {
      listPayType().then(response => {
        let tmp = response.data.data.litemall_pay_type
        if (tmp) {
          let arr = tmp.split(';')
          arr.forEach(data => {
            let t = data.split('-')
            this.payType.push(t)
          })
        }
      })
    },
    getList() {
      this.listLoading = true
      payMemberUserLogList(this.formInline).then(response => {
        // console.log(this.response)
        this.list = response.data.data.content
        this.total = response.data.data.totalElements
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },

    handleFilter() {
      this.getList()
    },
    formatePrice(row) {
      if (row.payType != 4) {
        return this.$t("$" + row.price)
      } else {
        return this.$t(row.point + "pts")
      }
    }

  }
}
</script>

<style scoped>
.daytime {
  color: #606266;
  font-size: 14px;
  font-weight: 700;
}
</style>
